<script setup >

const props = defineProps({metadata: Object})

</script>

<template>
    <el-form inline class="editor-header-ds" label-suffix=":">
      <el-space>
        <el-form-item label="Conn">
          <el-select v-model="props.metadata.current.conn" style="width: 100px;">
            <el-option
                v-for="ds in props.metadata.connects"
                :key="ds.name"
                :label="ds.name"
                :value="ds.name"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="Catalog">
          <el-cascader v-model="props.metadata.current.catalog"
                       :options="props.metadata.catalogs"/>
        </el-form-item>
        <el-form-item label="Action">
          <el-button type="primary">Run</el-button>
        </el-form-item>
      </el-space>
    </el-form>
</template>

<style scoped>

.editor-header-ds.el-form--inline .el-form-item{
  padding: 0;
  margin: 0;
  height: 40px;
  justify-content: center;
  align-items: center;
  line-height: 40px;
}
</style>